<template>
  <div class="create-order">
    <form @submit.prevent="submitOrder">
      <h2>新建订单</h2>
      <div class="form-group">
        <label>寄件人信息</label>
        <input v-model="formData.senderName" placeholder="姓名" required>
        <input v-model="formData.senderPhone" placeholder="手机号" pattern="1[3-9]\d{9}">
        <input v-model="formData.senderAddress" placeholder="地址" required>
      </div>
      
      <div class="form-group">
        <label>收件人信息</label>
        <input v-model="formData.receiverName" placeholder="姓名" required>
        <input v-model="formData.receiverPhone" placeholder="手机号" pattern="1[3-9]\d{9}">
        <input v-model="formData.receiverAddress" placeholder="地址" required>
      </div>
      
      <div class="form-group">
        <label>货物信息</label>
        <input type="number" v-model.number="formData.weight" min="0.1" step="0.1" placeholder="重量(kg)">
        <input type="number" v-model.number="formData.distance" min="1" placeholder="距离(km)">
      </div>
      
      <button type="submit">提交订单</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import orderApi from '@/api/orderApi';

const formData = ref({
  senderName: '',
  receiverName: '',
  weight: 0,
  distance: 0
});

const submitOrder = async () => {
  try {
    const response = await orderApi.createOrder(formData.value);
    console.log('订单创建成功:', response.data);
  } catch (error) {
    console.error('创建订单失败:', error);
  }
};
</script>